<template>
	<view class="page">
		<view class="tel">
			<input type="number" placeholder="请填写手机号码" v-model="phone" />
		</view>
		<view class="checked">
			<input type="number" placeholder="请填写验证码" v-model="verify" />
			<text @click="getUserVerify" v-if="show">获取验证码</text>
			<text v-if="!show">{{count}}</text>
		</view>
		<view class="save" @click="save">
			<image src="/static/img/login.png"></image>
			<text >保存</text>
		</view>
	</view>
</template>

<script>
	import ComHeader from '@/components/ComHeader';
	export default {
		onLoad(){
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
			//分享参数头url
			let url = this.$api.headurl
			this.$hshare.gethShareParam(url+'/#/pages/my/AccountSettings')
			/* ————————————进来就调用分享方法，右上角点击即可分享————————————————— */
		},
		data() {
			return {
				phone: '',
				verify: '',
				count: '',
				show: true,
				timer: null
			}
		},
		components: {
			ComHeader
		},
		methods: {
			// 获取用户手机验证码
			getUserVerify() {
				this.$api.getCode({phone:this.phone}).then(res => {
					if(res.data.status === true) {
						uni.showToast({
							title: '发送成功'
						})
						const time_count = 60;
						if(!this.timer) {
							this.count = time_count;
							this.show = false;
							this.timer = setInterval(() => {
								if(this.count > 0 && this.count <= time_count) {
									this.count--;
								} else {
									this.show = true;
									clearInterval(this.timer);
									this.timer = null;
								}
							},1000)
						}
					}
				})
			},
			// 获取用户手机号和验证码
		   getUserInfo() {
				this.$api.getUserInfo({phone: this.phone,verify: this.verify}).then(res=> {
					if(res.data.status === true) {
						uni.showToast({
							title: '保存成功,请重新登录',
							icon: 'none'
						})
						setTimeout(function(){
							//跳转到待发货 switchTab
							uni.navigateTo({
								url: 'pages/login/Login'
							})
						},1000)
						
					}
				})
			},
			save() {
				this.getUserInfo();
			}
		}
	}
</script>

<style>
	/* .page {
		width: 100%;
		height: calc(100vh - (var(--status-bar-height) + 40rpx));
		padding-top: calc(var(--status-bar-height) + 40rpx);
	} */
	.page {
		width: 100%;
		height: (--status-bar-height);
		padding-top: (--status-bar-height);
	}
	.tel {
		width: 630rpx;
		height: 109rpx;
		line-height: 109rpx;
		margin-left: 60rpx;
		margin-top: 20rpx;
		border-bottom: 1rpx solid #999;
	}
	.tel input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
	}
	.checked {
		position: relative;
		width: 630rpx;
		height: 108rpx;
		margin-left: 60rpx;
		border-bottom: 1rpx solid #999;
	}
	.checked input {
		padding-left: 30rpx;
		width: 100%;
		height: 100%;
	}
	.checked text {
		position: absolute;
		right: 0;
		top: 45rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: underline;
		color: rgba(254,177,71,1);
	}
	.save {
		position: relative;
		width: 386rpx;
		height: 68rpx;
		line-height: 68rpx;
		margin-top: 140rpx;
		margin-left: 182rpx;
	}
	.save image {
		width: 100%;
		height: 100%;
	}
	.save text {
		position: absolute;
		left: 160rpx;
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: rgba(255,255,255,1);
	}
</style>
